import React, { useState } from 'react'
import Left from '../../components/Message/Left'
import Right from '../../components/Message/right'
import { Input, Button } from 'antd-mobile'
function Message() {
  const [value, setValue] = useState('')
  const [mess, setMess] = useState([])
  const send = () => {
    setMess((prev) => [...prev, { message: value }])
    setValue('')
    console.log('连接成功')
  }
  return (
    <div>
      <div style={{ height: '500px' }}>
        <Left></Left>
        {
          mess.map((item, index) => {
            return <Right key={index} {...item} />
          })
        }
      </div>
      <div style={{ display: 'flex' }}>
        <Input
          style={{width:'310px'}} 
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
        <Button onClick={() => send()}>发送</Button>
      </div>
    </div>
  )
}

export default Message
